import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { connect } from 'react-redux';
import Item, { parentWidth, itemWidth, itemHeight, margin } from './item';
import { DragSortableView } from 'react-native-drag-sort';
import HeaderRightBtn from './header-right-btn';
import Touchable from '@/components/Touchable';
import _ from 'lodash';

const mapStateToProps = ({ category }) => {
    return {
        myCategorys: category.myCategorys,
        categorys: category.categorys,
        isEdit: category.isEdit,
    };
};

const connector = connect(mapStateToProps);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f3f6f6',
    },
    classifyName: {
        fontSize: 16,
        marginTop: 14,
        marginBottom: 8,
        marginLeft: 10,
    },
    classifyView: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        padding: 5,
    },
});
const fixedItems = [0, 1];
function Category(props) {
    const { categorys, isEdit, navigation, dispatch } = props;
    const [myCategorys, setMyCategorys] = useState(props.myCategorys);
    const [scrollEnabled, setScrollEnabled] = useState(true);
    const clasifyGroup = _.groupBy(categorys, item => item.classify);

    const renderUnSelectedItem = (item, index) => {
        return (
            <Touchable
                key={item.id}
                onPress={() => onPress(item, index, false)}
                onLongPress={onLongPress}>
                <Item data={item} isEdit={isEdit} selected={false} />
            </Touchable>
        );
    };

    const onPress = (item, index, selected) => {
        const disabled = fixedItems.indexOf(index) > -1;
        if (disabled) return;
        if (isEdit) {
            if (selected) {
                setMyCategorys(myCategorys.filter(
                    selectedItem => selectedItem.id !== item.id,
                ))

            } else {
                setMyCategorys(myCategorys.concat([item]))

            }
        }
    };
    const renderItem = (item, index) => {
        const disabled = fixedItems.indexOf(index) > -1;
        return (
            <Item
                key={item.id}
                data={item}
                disabled={disabled}
                isEdit={isEdit}
                selected
            />
        );
    }
    const onDataChange = (data) => {
        setMyCategorys(data)
    }

    const onLongPress = () => {
        dispatch({
            type: 'category/setState',
            payload: {
                isEdit: true,
            },
        });
    };
    const onSubmit = () => {

        dispatch({
            type: 'category/toggle',
            payload: {
                myCategorys,
            },
        });
        if (isEdit) {
            navigation.goBack();
        }
    };
    const onClickItem = (data, item) => {
        onPress(item, data.indexOf(item), true);
    };
    useEffect(() => {
        dispatch({
            type: 'category/setState',
            payload: {
                isEdit: false,
            },
        });
        navigation.setOptions({
            headerRight: () => <HeaderRightBtn onSubmit={onSubmit} />,
        });
    }, [])
    return (
        <ScrollView style={styles.container} scrollEnabled={scrollEnabled}>
            <Text style={styles.classifyName}>我的分类</Text>
            <View style={styles.classifyView}>
                <DragSortableView
                    dataSource={myCategorys}
                    fixedItems={fixedItems}
                    renderItem={renderItem}
                    sortable={isEdit}
                    keyExtractor={item => item.id}
                    onDataChange={onDataChange}
                    parentWidth={parentWidth}
                    childrenWidth={itemWidth}
                    childrenHeight={itemHeight}
                    marginChildrenTop={margin}
                    onClickItem={onClickItem}
                    onDragStart={() => {
                        setScrollEnabled(false)
                    }}
                    onDragEnd={() => {
                        setScrollEnabled(true)
                    }}
                />
            </View>
            <View>
                {Object.keys(clasifyGroup).map(classify => {
                    return (
                        <View key={classify}>
                            <Text style={styles.classifyName}>{classify}</Text>
                            <View style={styles.classifyView}>
                                {clasifyGroup[classify].map((item, index) => {
                                    if (
                                        myCategorys.find(
                                            selectedItem => selectedItem.id === item.id,
                                        )
                                    ) {
                                        return null;
                                    }
                                    return renderUnSelectedItem(item, index);
                                })}
                            </View>
                        </View>
                    );
                })}
            </View>
        </ScrollView>
    );
}

export default connector(Category);